import { Component } from "react";

// function ChildCpns(props) {
//   //3.子组件接收 使用
//   const { name, incrementChange } = props

//   return (
//     <div>
//       <h2>{ name }</h2>
//       <button onClick={incrementChange}>子组件：+1</button>
//     </div>
//   )
// }
class ChildCpns extends Component {
  
  render() {
    const { name, incrementChange } = this.props
    return (
      <div>
        <h2>{ name }</h2>
        <button onClick={incrementChange}>子组件：+1</button>
      </div>
    )
  }
}


class App extends Component {
  constructor() {
    super()

    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数：{ this.state.counter }</h2>
        <hr />
                                    {/*2. 传递给子组件*/}
        <ChildCpns name="嘻嘻嘻" incrementChange={ () => this.increment() } />
      </div>
    )
  }

  //1.父组件定义一个方法
  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

export default App